<template>
	<div class="file-message-montainer" :title="TUITranslateService.t('TUIChat.单击下载')" @click="download">
		<Icon :file="files" class="file-icon" />
		<div>
			<div>{{ props.content.name }}</div>
			<div>{{ props.content.size }}</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { withDefaults } from '../../../../adapter-vue';
	import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
	import Icon from '../../../common/Icon.vue';
	import files from '../../../../assets/icon/file-light.svg';
	import type { IFileMessageContent } from '../../../../interface';

	const props = withDefaults(
		defineProps<{
			content : IFileMessageContent;
			messageItem : IMessageModel;
		}>(),
		{
			content: () => ({} as IFileMessageContent),
			messageItem: () => ({} as IMessageModel),
		},
	);

	const download = () => {
		uni.downloadFile({
			url: props.content.url,
			success: function (res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function (res) {
						console.log('打开文档成功', res);
					}
				});
			}
		});




		// if (props.messageItem.hasRiskContent) {
		//   return;
		// }
		// const option = {
		//   mode: 'cors',
		//   headers: new Headers({
		//     'Content-Type': 'application/x-www-form-urlencoded',
		//   }),
		// } as RequestInit;
		// // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
		// if ((window as any)?.fetch) {
		//   fetch(props.content.url, option)
		//     .then(res => res.blob())
		//     .then((blob) => {
		//       const a = document.createElement('a');
		//       const url = window.URL.createObjectURL(blob);
		//       a.href = url;
		//       a.download = props.content.name;
		//       a.click();
		//     });
		// } else {
		//   const a = document.createElement('a');
		//   a.href = props.content.url;
		//   a.target = '_blank';
		//   a.download = props.content.name;
		//   a.click();
		// }
	};
</script>
<style lang="scss" scoped>
	@import "../../../../assets/styles/common";

	.file-message-montainer {
		display: flex;
		flex-direction: row;
		cursor: pointer;

		.file-icon {
			margin: auto 8px;
		}
	}
</style>